<template>
  <div class="hc-address-map">
    <baidu-map id="allmap" class="allmap" @ready="handler"></baidu-map>
    <div class="hc-address-serch hc-pr">
      <div class="hc-address-back" @click="handlerBack">
        <span class="iconfont icon-lujing7" style="font-size: 16px;"></span>
      </div>
      <div class="hc-address-icon">
        <span class="iconfont icon-ziyuan8" style="font-size: 16px;"></span>
      </div>
      <input id="now_place_tip" v-model="addressInfo" type="text" placeholder="请输入地址信息">
      <button v-show="!!addressInfo" class="hc-address-cancel" @click="addressInfo=''">取消</button>
    </div>
    <div id="container"></div>
    <div class="hc-address-label">
      <div>
        {{formattedAddress}}
      </div>
      <div class="hc-address-btn" @click="handlerGetPoi">
        {{!flag ? '确定' : '返回'}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    addressMapCenter: {
      type: Array,
      default() {
        return []
      }
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formattedAddress: '',
      addressInfo: '',
      addressDetails: {},
      center: []
    }
  },
  mounted() {

  },
  methods: {
    handler({ BMap, map }) {
      if(this.flag) {
        return;
      }
      this.loacl(BMap, map, (data={}) => {
        this.loadMap([data.point.lng, data.point.lat])
      });
    },
    loadMap(addressMapCenter) {
      if(addressMapCenter.length > 0) {
        this.center = addressMapCenter;
        this.renderMap()
      }
    },
    handlerGetPoi() {
      this.$emit('handlerGetPoi', {
        center: this.center,
        formattedAddress: this.formattedAddress,
        addressDetails: this.addressDetails
      })
    },
    handlerBack() {
      this.$emit('handlerBack')
    },
    renderMap() {
      let _this = this;
      AMap.service('AMap.Geocoder', function () {//回调函数
        //实例化Geocoder
        let geocoder = new AMap.Geocoder({
          city: "010"//城市，默认：“全国”
        });
        //实例化，高德地图
        let mapA = new AMap.Map('container', {
          resizeEnable: true,//监听地图容器大小变化
          zoom: 14,//地图放大比例PC：3-18，手机：3-19
          center: _this.center,//中心点，经纬度
          mapStyle: 'normal'
        });

        AMap.plugin('AMap.Autocomplete',function(){//回调函数
            //实例化Autocomplete
            //输入提示
            var autoOptions = {
                city: "", //城市，默认全国
                input: "now_place_tip"//使用联想输入的input的id
            };
            let autocomplete = new AMap.Autocomplete(autoOptions);
            console.log(autocomplete);
            AMap.event.addListener(autocomplete, 'select', onAutoComplete); //返回定位信息
            function onAutoComplete(data) {
              console.log({data})
              if(data.poi.location) {
                mapA.setCenter(data.poi.location);
                marker.setPosition(data.poi.location);
              }else {
                alert('请选择更精确的位置');
              }
            }
            //TODO: 使用autocomplete对象调用相关功能
        });

        //标注点
        var startIcon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(32, 43),
          // 图标的取图地址
          image: '',
          // 图标所用图片大小
          imageSize: new AMap.Size(32, 43),
          // 图标取图偏移量
          imageOffset: new AMap.Pixel(0, 0)
        });

        let marker = new AMap.Marker({
          position: _this.center,//经纬度
          map: mapA,
          icon: startIcon,
          offset: new AMap.Pixel(-16, -40)
        });
        //地图移动 始终固定中心点在屏幕正中心
        mapA.on('mapmove', function () {
          //获取经纬度
          var tt1 = mapA.getCenter();
          marker.setPosition(tt1);
        });
        //地图移动结束，最新的经纬轴即地区详情
        mapA.on('moveend', function () {
          //获取经纬度
          var tt2 = mapA.getCenter();
          niDi(tt2.getLng(), tt2.getLat());
        });
        //逆地理编码 函数   state:1默认当前定位/2搜索位置
        niDi(..._this.center, 1)
        function niDi(lng, lat, state) {
          //逆地理编码
          var lnglatXY = new AMap.LngLat(lng, lat);//地图上所标点的坐标
          geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              console.log(result, 10100101);
              _this.center = [lng, lat];
              let formattedAddress = '';
              formattedAddress = result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + (result.regeocode.addressComponent.district || result.regeocode.addressComponent.township);

              _this.formattedAddress = result.regeocode.formattedAddress || formattedAddress;
              _this.addressDetails = result;
              if(state === 1) {
                // _this.handlerGetPoi()
              }
            }
          });
        }
      });
    }
  },
}
</script>

<style lang="scss">
.hc-address-map {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  .hc-address-serch {
    position: relative;
    width: 100%;
    height: 45px;
    background-color: #fff;
    padding: px2rem(9) px2rem(15);
    padding-left: 42px;
    box-sizing: border-box;
    .hc-address-back {
      position: absolute;
      left: 14px;
      top: 0px;
      bottom: 0px;
      margin: auto;
      line-height: 48px;
      font-size: 16px;
      color: #BFBFBF;
      cursor: pointer;
    }
    .hc-address-icon {
      position: absolute;
      left: 54px;
      top: 0px;
      bottom: 0px;
      margin: auto;
      line-height: 48px;
      font-size: 14px;
      color: #BFBFBF;
    }
    input {
      width: 100%;
      height: 100%;
      border: none;
      background-color: #f2f2f2;
      border-radius: 40px;
      padding-left: 32px;
      box-sizing: border-box;
    }
    .hc-address-cancel {
      background-color: #ff633b;
      color: #fff;
      text-align: center;
      position: absolute;
      right: px2rem(15);
      top: 0px;
      height: 29px;
      border-radius: 40px;
      bottom: 0px;
      margin: auto;
      width: 60px;
      border: none;
      font-size: 14px;
    }
  }
  .hc-address-label {
    width: 100%;
    height: 48px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    background-color: #fff;
    padding-right: 90px;
    font-size: 14px;
    padding: 4px 90px 4px 15px;
    color: #333;
    box-sizing: border-box;
  }
  .hc-address-btn {
    background-color: #ff633b;
    height: 48px;
    color: #ffffff;
    width: 80px;
    position: absolute;
    right: 0px;
    top: 0px;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
  }
}
.amap-sug-result {
  display: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: 0px !important;
  padding: 0 px2rem(15);
  border: none;
  z-index: 100000;
  .auto-item {
    padding: 20px 0px;
    font-size: 14px;
    border-bottom: 1px solid #cccccc;
    .auto-item-span {
      display: block;
      padding: 0px;
    }
  }
}
#container {
  z-index: 9;
  height: 100vh;
}
</style>
